<script setup>
import { computed, h, inject } from 'vue';
import { StarFilled, StarOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { VisibleIcon, xsToOpts } from '@/util/index.js';

const props = defineProps(['item']);
const labelColorDic = inject('labelColorDic');
const isLabelSelectable = inject('isLabelSelectable');
const labelCountOverlimitWarn = inject('labelCountOverlimitWarn');
const classes = inject('classes');
const OpGte = inject('OpGte');

const selectedLayers = inject('selectedLayers');
const editingLayer = inject('editingLayer');
const setExpectedAutoAppend = inject('setExpectedAutoAppend');
const autoAppendLayersExpected = inject('autoAppendLayersExpected');

const selectLayer = inject('selectLayer');
const delLayer = inject('delLayer');

const filterOption = (input, opt) => opt.value.includes(input);
const options = computed(() => xsToOpts(classes.value));
const icon = computed(VisibleIcon(() => props.item.visible));
</script>

<template>
  <li
    :class="{ selected: selectedLayers.has(props.item) }"
    :style="{ 'border-color': props.item.color }"
    @pointerdown.self="event => selectLayer(event.ctrlKey ? 'multiple' : 'single', 'switch', props.item)">
    <template v-if="editingLayer == item">
      <!-- mode="multiple" -->
      <!-- :max-tag-count="1" -->
      <!-- :max-tag-text-length="6" -->
      <a-select
        :value="props.item.label[0]"
        @select="
          (value, option) => {
            if (!isLabelSelectable(option.label)) {
              labelCountOverlimitWarn(option.label);
              return;
            }

            props.item.label = Array.of(option.label);
            props.item.color = labelColorDic[option.label];
          }"
        placeholder="请选择标签"
        size="small"
        :options="options"
        show-search
        :dropdown-match-select-width="false"
        :filter-option="filterOption">
        <template #suffixIcon></template>
      </a-select>
    </template>
    <template v-else>
      <div
        class="label ellipsis"
        :class="{ empty: 0 == props.item.label.length }"
        :title="props.item.label.join(', ')"
        @pointerdown="event => selectLayer(event.ctrlKey ? 'multiple' : 'single', 'switch', props.item)"
        @dblclick="() => OpGte('标注') && (editingLayer = props.item)">
        {{ props.item.label.join(', ') || '双击编辑标签' }}
      </div>

      <div class="fn">
        <template v-if="OpGte('标注')">
          <a-popconfirm
            title="确定删除此数据？"
            placement="left"
            ok-text="确定"
            cancel-text="取消"
            @confirm="() => delLayer(props.item)"
          >
            <a-button>
              <template #icon><delete-outlined style="color: rgb(200,0,0);" /></template>
            </a-button>
          </a-popconfirm>

          <a-button @click.stop="() => setExpectedAutoAppend(props.item)">
            <template #icon>
              <template v-if="autoAppendLayersExpected.has(props.item)">
                <star-filled style="color: gold;" />
              </template>
              <template v-else>
                <star-outlined />
              </template>
            </template>
          </a-button>
        </template>

        <a-button @click.stop="() => props.item.visible = !props.item.visible">
          <template #icon>
            <component :is="icon" style="color: rgb(26,115,232);"></component>
          </template>
        </a-button>
      </div>
    </template>
  </li>
</template>
